<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>系统颜色风格变换</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="../plugin/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugin/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../plugin/Ionicons/css/ionicons.min.css">
	<link rel="stylesheet" href="../adminlte/css/AdminLTE.min.css">

	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<style type="text/css">
		.list-unstyled{margin:10px;}
		.full-opacity-hover{opacity:1;filter:alpha(opacity=1);border:1px solid #fff}
		.full-opacity-hover:hover{border:1px solid #f00;}
	</style>
</head>
<body class="gray-bg">
<ul class="list-unstyled clearfix">
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin='skin-blue' style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style='display:block; width: 20%; float: left; height: 13px; background: #367fa9;'></span>
			<span style='display:block; width: 80%; float: left; height: 13px; background: #367fa9;'></span>
			<span style='display:block; width: 20%; float: left; height: 30px; background: #222d32;'></span>
			<span style='display:block; width: 80%; float: left; height: 30px; background: #f4f5f7;'></span>
		</a>
		<p class="text-center">蓝</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-black" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style='display:block; width: 20%; float: left; height: 13px; background: #fefefe;'></span>
			<span style='display:block; width: 80%; float: left; height: 13px; background: #fefefe;'></span>
			<span style='display:block; width: 20%; float: left; height: 30px; background: #222;'></span>
			<span style='display:block; width: 80%; float: left; height: 30px; background: #f4f5f7;'></span>
		</a>
		<p class="text-center">黑</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-purple" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-purple-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-purple'></span>
			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">紫</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-green" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-green-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-green'></span>
			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">绿</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-red" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-red-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-red'></span>
			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">红</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-yellow" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-yellow-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-yellow'></span>
			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">黄</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-blue-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-light-blue'></span>
			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">蓝灰</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-black-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px; background: #fefefe"></span>
			<span style="width: 80%; float: left; height: 13px; background: #fefefe"></span>
			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">黑灰</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-purple-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-purple-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-purple'></span>
			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">紫灰</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-green-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-green-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-green'></span>
			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">绿灰</p>
	</li>
	
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-red-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-red-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-red'></span>
			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">红灰</p>
	</li>
	<li style="float:left; width: 33.33333%; padding: 5px;">
		<a href="javascript:" data-skin="skin-yellow-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
			<span style="width: 20%; float: left; height: 13px;" class='bg-yellow-active'></span>
			<span style="width: 80%; float: left; height: 13px;" class='bg-yellow'></span>
			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
		</a>
		<p class="text-center">黄灰</p>
	</li>
</ul>
<script src="../plugin/jquery/jquery.min.js"></script>
<script src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugin/fastclick/fastclick.js"></script>
<script src="../adminlte/js/adminlte.min.js"></script>
<script type="text/javascript">
	//皮肤样式列表
	var skins = [
	    "skin-blue",
	    "skin-black",
	    "skin-red",
	    "skin-yellow",
	    "skin-purple",
	    "skin-green",
	    "skin-blue-light",
	    "skin-black-light",
	    "skin-red-light",
	    "skin-yellow-light",
	    "skin-purple-light",
	    "skin-green-light"
	];
	
	// 切换系统皮肤风格样式
	$("[data-skin]").on('click', function(e) {
		var skin = $(this).data('skin');
		$.each(skins, function (i) {
			parent.$("body").removeClass(skins[i]);
		});
		parent.$("body").addClass(skin);
		store('skin', skin);
		return false;
	});
	
	// 浏览器localStorage存储皮肤风格值
    function store(name, val) {
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem(name, val);
        } else {
            window.alert('Please use a modern browser to properly view this template!');
        }
    }
	
	// 从浏览器localStorage获取皮肤风格值
    function get(name) {
        if (typeof (Storage) !== "undefined") {
            return localStorage.getItem(name);
        } else {
            window.alert('Please use a modern browser to properly view this template!');
        }
    }
</script>
</body>
</html>
